<template>
  <el-dialog v-model="diagVisible" title="颜色配置">
    <el-form size="mini" style="max-height: 400px;overflow: auto">
      <el-form-item>
        <el-button size="mini" type="primary" @click="add">添加</el-button>
      </el-form-item>
      <el-form-item  label="颜色组">
        <div v-for="(item,index) in MultiColors" :key="index">
          {{index}} <input type="color"  class="form-control globalColor" v-model="MultiColors[index]" style="width: 200px;display: inline;margin-bottom: 5px;">
          <el-button size="mini" @click="del(index)" type="danger">删除</el-button>
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button size="mini" @click="diagVisible=false">取 消</el-button>
        <el-button size="mini" type="primary" @click="confirm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "color",
  data() {
    return {
      MultiColors: [],
      confirmCallBack: {},
      diagVisible: false
    }
  },
  methods: {
    add() {
      this.MultiColors.push("#ffffff")
    },
    del(index) {
      this.MultiColors.splice(index, 1)
    },
    confirm() {
      if (this.confirmCallBack) {
        this.confirmCallBack(this.MultiColors)
      }
      this.diagVisible = false
    },
    show(MultiColors, confirmCallBack) {
      this.diagVisible = true
      this.MultiColors = MultiColors
      this.confirmCallBack = confirmCallBack
    }
  }
}
</script>

<style scoped>

</style>
